<template>
<view class="loading" :style="'height:'+height+'rpx'">  
	<view v-if="loadingState.loading" class="loading-icon"> 
		<view class="loader-18 f-blue"></view> 
	</view>
	<view v-if="loadingState.default" class="loading-default">
		<view class="loading-icon"> 
			<view class="loader-18 f-blue"></view> 
		</view>		
		<view class="loading-text">数据加载中</view>
	</view>
	<view v-if="loadingState.stop" class="loading-text">没有数据了...</view>
</view>
</template>

<script>
export default{
	name:'loading',
	data(){
		return {
			
		}
	},
	props:{
		loadingState:{
			type:Object
		},
		icon:{
			type:String
		},
		height:{
			type:String
		}
	} 
}
</script>

<style lang="less">
	 
 .loading{
	 display: flex;
	 align-items: center;
	 justify-content: center; 	 
 }
.loading-default{
	padding:30rpx;
	.loading-icon{
		padding-bottom:0; 
	}
}
.loading-text{
	padding:10rpx 0 20rpx;
	text-align: center;
	font-size:28rpx;
	color:#999;
} 

/* loading */ 
.loading-icon { 
	width: 30px;
	height:30px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;    
	vertical-align: top;
	-webkit-transition: .3s color, .3s border;
	transition: .3s color, .3s border; 
}
 
[class*="loader-"] {
	display: inline-block;
	width: 20px;
	height:20px; 
	vertical-align: middle;
	pointer-events: none;
}
.loader-18 {
	position: relative;
}
.loader-18:before,
.loader-18:after {
	content: '';
	display: block;
	position: absolute;
	border-radius: 50%;
	border: 2px solid transparent;
	border-bottom-color: currentcolor;
	top: 0;
	left: 0;
	-webkit-animation: 1s loader-18 linear infinite;
	animation: 1s loader-18 linear infinite;
}
.loader-18:before {
	width: 16px;
	height: 16px;
	left: 2px;
	top: 2px;
}
.loader-18:after {
	width: 20px;
	height: 20px;
	// top: .1em;
	// left: .1em;
	-webkit-animation-direction: reverse;
	animation-direction: reverse;
}
@-webkit-keyframes loader-18 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
@keyframes loader-18 {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}
	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}
</style>
